<template>
    <div id="app">
      <!-- 阻止默认事件：阻止表单默认提交 -->
      <form @submit.prevent="handleSubmit">
        <input type="text" v-model="inputValue" placeholder="输入内容">
        <button type="submit">提交</button>
      </form>
  
      <!-- 阻止事件冒泡 -->
      <div @click="handleDivClick">
        <button @click.stop="handleButtonClick">点击我（阻止冒泡）</button>
      </div>
  
      <!-- 事件捕获 -->
      <div @click.capture="handleDivCaptureClick">
        <button @click="handleButtonCaptureClick">点击我（捕获模式）</button>
      </div>
  
      <!-- 使事件只触发一次 -->
      <button @click.once="handleOnceClick">点击我（只触发一次）</button>
  
      <!-- 监听捕获事件 -->
      <div @click.capture="handleCaptureListener">
        <button @click="handleInnerButtonClick">点击我（监听捕获）</button>
      </div>
  
      <!-- 捕获特定按键 -->
      <input type="text" @keyup.enter="handleEnterKey" placeholder="按回车键触发">
  
      <!-- 捕获鼠标按键 -->
      <button @mousedown.right="handleRightMouseClick">右键点击我</button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const inputValue = ref('');
  
  // 处理表单提交
  const handleSubmit = () => {
    console.log('表单提交，输入内容：', inputValue.value);
  };
  
  // 处理 div 点击
  const handleDivClick = () => {
    console.log('div 被点击');
  };
  
  // 处理按钮点击
  const handleButtonClick = () => {
    console.log('按钮被点击，事件未冒泡到 div');
  };
  
  // 处理 div 捕获模式点击
  const handleDivCaptureClick = () => {
    console.log('div 捕获到点击事件');
  };
  
  // 处理按钮捕获模式点击
  const handleButtonCaptureClick = () => {
    console.log('按钮被点击');
  };
  
  // 处理只触发一次的点击事件
  const handleOnceClick = () => {
    console.log('按钮点击事件只触发一次');
  };
  
  // 处理捕获监听事件
  const handleCaptureListener = () => {
    console.log('捕获到内部按钮点击事件');
  };
  
  // 处理内部按钮点击
  const handleInnerButtonClick = () => {
    console.log('内部按钮被点击');
  };
  
  // 处理回车键按下事件
  const handleEnterKey = () => {
    console.log('回车键被按下');
  };
  
  // 处理鼠标右键点击事件
  const handleRightMouseClick = () => {
    console.log('鼠标右键点击按钮');
  };
  </script>
  
  <style scoped>
  button {
    margin: 5px;
  }
  input {
    margin: 5px;
  }
  </style>